/**
 * 主题配置 模板文件
 * */

import { useSettingStore } from "@/stores/setting";
import { getDarkColor, getLightColor, hexToRgb } from "@/utils/theme";

export const themeColor = {
  primary: "#23a9f2",
  success: "#67c23a",
  warning: "#e6a23c",
  danger: "#f56c6c",
  error: "#f56c6c",
  info: "#909399",
};

export const appColor = {
  "nil-menu-menu-background": "#304156",
  "nil-menu-item-hover-background": "#001528",
  "nil-menu-item-hover-color": "#23a9f2",
  "nil-menu-children-background": "#1f2d3d",
  "nil-menu-children-hover-background": "#001528",
  "nil-menu-sub-menu-title-color": "#f8f8f8",
  "nil-app-logo-color": "#23a9f2",
  "nil-app-logo-background": "#fff",
};

function getColor(key, color) {
  const el = document.documentElement;
  themeColor[key] = color;
  console.log("color", color);
  el.style.setProperty(`--el-color-${key}`, color);
  el.style.setProperty(`--el-color-${key}-rgb`, hexToRgb(color));
  el.style.setProperty(`--el-color-${key}-dark-2`, getDarkColor(color, 0.2));
  for (let i in new Array(10).fill(10)) {
    if (key === "primary") {
      const kkkk = "--el-color-" + key + "-light-" + i;
      const ccc = getLightColor(color, i / 10);

      el.style.setProperty(kkkk, ccc);
    } else {
      el.style.setProperty(
        `--el-color-${key}-light-8`,
        getLightColor(color, 8 / 10)
      );
      if (i % 2 == 1) {
        const kkkk = "--el-color-" + key + "-light-" + i;
        const ccc = getLightColor(color, i / 10);

        el.style.setProperty(kkkk, ccc);
      }
    }
  }
}

function getAppColor(key, color) {
  const el = document.documentElement;
  appColor[key] = color;
  el.style.setProperty(`--${key}`, color);
}

// 初始化
export function initColor() {
  const setting = useSettingStore();
  // 判断 localstorge
  const _themeColor = JSON.parse(
    window.localStorage.getItem("nil-theme-color") || "{}"
  );

  const _appColor = JSON.parse(
    window.localStorage.getItem("nil-app-color") || "{}"
  );

  console.log("_themeColor", _themeColor);
  const keys = Object.keys(_themeColor);
  // 存在
  if (keys) {
    keys.forEach((it) => {
      getColor(it, _themeColor[it]);
      console.log("_themeColor[keys]", _themeColor[it]);
    });
    setting.setThemeColor(themeColor);
  }

  console.log("_appColor", _appColor);
  const app_keys = Object.keys(_appColor);
  // 存在
  if (app_keys) {
    app_keys.forEach((it) => {
      getAppColor(it, _appColor[it]);
      console.log("_appColor[keys]", _appColor[it]);
    });
    setting.setAppColor(appColor);
  }
}
